<template>
    <div>
        我是子组件 - {{ tit }} --{{ num }}
        <button @click="emitFn">我是子组件中的按钮--实现子传父</button>
    </div>
</template>

<script setup lang="ts">

import { ref, type Ref } from 'vue';
// 接收父组件的参数
// 写法1: 数组形式
// const props = defineProps(['tit']);
// console.log('props', props);

//写法2 : 使用对象接收
// const props = defineProps({
//     tit: {
//         required: true, type: String
//     }
// })

//写法3:
// const props = defineProps<{
//     tit: string,
//     num: number
// }>()


// 写法4:
// 使用接口去创建一个数据类型
// interface propsType {
//     tit: string,
//     num: number
// }

// const props = defineProps<propsType>()

//写法5:
//使用type 创建数据类型
type propsType = {
    tit: string,  // 必传参数
    num?: number // 可选参数
}
// 使用 withDefaults 设置参数的默认值
const props = withDefaults(defineProps<propsType>(), {
    tit: 'hello world',
    num: 100
})


// 实现子传父
// 方式1: 使用自己的方式处理子传父
// const emit = defineEmits(['transfer'])
// console.log('emit', emit);
// const userObj = ref({ name: '张三', age: 20 })
// const emitFn = () => {
//     emit('transfer', userObj)
// }

// 方式2:  使用官方的方式实现子传父
// defineEmits(['transfer'])

const userObj: Ref<{ name: string, age: number }> = ref({ name: '张三', age: 20 });
// 参数e : 表示事件. 类型就是自定义事件, 参数value 为 传递的参数,类型为  Ref<{ name: string, age: number }>
const emit = defineEmits<{
    (e: 'transfer', value: Ref<{ name: string, age: number }>): void
}>()

const emitFn = () => {
    emit('transfer', userObj)
}


</script>
<style scoped>

</style>